<template>
    <div class="container">
            <OperaAlert ref="hint" />
        <div class="toolbar">
            <div class="but">
                <button @click="importHandle" @mouseover="getExample = true">点击导入
                </button>
                <input type="file" name="upLode" @change="upLodeFile" id="upLode" style="display: none">
                <button @click="exportHandle">点击导出
                </button>
                <div class="tip" v-show="getExample" @mouseleave="getExample = false">
                    <GetExample type="2" @closeWin="closeWin"></GetExample>
                </div>
            </div>
            <div id="select">
                <li>
                    <Select @changePage="changePage" :type="'college'" ref="col" @updateSubOptions="updateMajorOptions"></Select>
                </li>
                <li>
                    <Select @changePage="changePage" :type="'major'" ref="maj"></Select>
                </li>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索姓名/学号" v-model="searchCon" @keyup.enter="searchHandle">
                <img src="../assets/images/teacher/myCourse/search.svg" alt="搜索" @click="searchHandle">
            </div>
        </div>
        <div class="typeBox">
                    <button @click="emits('changeType', 1)">全部</button>
                    <button style="background-color: #707070;" >已注册</button>
                </div>
        <table class="table">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <th>序号/目录</th>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>学院</th>
                    <th>专业</th>
                    <th>班级</th>
                    <th>邮箱</th>
                    <th>联系方式</th>
                </tr>
                <tr v-for="(item, index) in records" align="center" @click="changeInfo(item)">
                    <td>{{ (pageData.pageData.current-1)*pageData.pageData.pageSize+ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.college }}</td>
                    <td>{{ item.major }}</td>
                    <td>{{ item.grades }}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.phone }}</td>
                </tr>
            </table>
            <ChangeInfo ref="info" @close="close"  @succHandle="succHandle" @errHandle="errHandle" :dialogVisible="dialogVisible"></ChangeInfo>
        </table>

    </div>
    <div class="pagination">
        <Pagination ref="pageData" @changePage="changePage" />
    </div>
</template>
<script setup>
import { exportTable, getUserData } from '../utils';
import { getCurrentInstance, ref } from 'vue';
import Pagination from './Pagination.vue';
import GetExample from './GetExample.vue'
import Select from '../components/Select.vue';
import ChangeInfo from './ChangeInfo.vue';
import OperaAlert from './OperaAlert.vue';

const http = getCurrentInstance()?.appContext.config.globalProperties.$http

const emits=defineEmits(['changeType'])

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}

//传给分页组件的info
const pageData = ref()

// 获得筛选选项
let col = ref()
let maj = ref()

// 获得的记录
const records = ref()

const changePage = function (pd) {
    let limit = ''
    if(pd.limit != undefined){
        if(pd.limit.college != undefined){
        limit += '&limitCollege=' +pd.limit.college
    }else if(pd.limit.major != undefined){
        limit += `&limitMajor=${pd.limit.major}`
    }
    }
    let like = ''
    if(pd.like != undefined){
        like = `&like=${pd.like}`
    }
    fetch(http + '/admin/users?current=' + pd.current + '&pageSize=' + pd.pageSize + '&role=1' +limit +like, {
        method: 'get',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
        console.log(data);
        data = data.data
        records.value = data.records
        pageData.value.changePage(data)

        if(records.value.length > 0){
            let params = {
                school: records.value[0].school
            }
            col.value.getFilterOptions(params)
        }
    }).catch((err) => {
        console.log(err);
    })
}

const updateMajorOptions = function(data){
    // data是直接上级的属性值，是String不是Object
    let params = col.value.sumPar
    params.college = data
    maj.value.getFilterOptions(params)
}



// 导入表格
const getExample = ref(false)
// 关闭示例表提醒弹窗
const closeWin = function(){
    getExample.value = false
}

// 导出表格
const exportHandle = function(){
    exportTable(1)
}

const dialogVisible = ref(false)

const info = ref()
// 修改表格
const changeInfo = function(item){
    dialogVisible.value = true
    info.value.changeInfo(item)
}

const close = function(){
    dialogVisible.value = false
}

// 修改成功失败的提醒
const hint = ref()
const errHandle = function(text){
    hint.value.errHandle(text)
}

const succHandle = function(){
    hint.value.succHandle()
}

//搜索表格
const searchCon = ref()
const searchHandle = function(){
    let con = searchCon.value
    changePage({current: 1, pageSize: 5, like: con})
}
</script>
<style scoped>
.table {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px #bfbfbf;
}

.table table {
    width: 100%;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    color: #707070;
}

.table th {
    border: solid 1px #bfbfbf;
    background-color: #e4e7ed;
    height: 53px;
}

.table td {
    border: solid 1px #bfbfbf;
    height: 53px;
    background-color: white;
}
.tip {
    position: absolute;
    top: 115%;
    z-index: 10;
    left: -10%;
}

.toolbar {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}

.but {
    width: 30%;
    display: flex;
    justify-content: space-between;
    margin-right: 2%;
}

.but button {
    width: 45%;
    height: 44px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    border: 0px;
    color: #fafafa;
    font-size: 1.1em;
    font-family: Source Han Sans CN;
    font-weight: normal;
    font-stretch: normal;
    cursor: pointer;
    ;
}

.search {
    width: 40%;
    height: 44px;
}

.search input {
    width: 100%;
    height: 100%;
    border: 0px;
    padding-left: 4%;
    background-color: #fcfcfd;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    letter-spacing: 0px;
    color: #707070;
    outline: none;
    padding-right: 11%;
}

.search img {
    position: absolute;
    right: 1%;
    height: 100%;
    scale: 0.6;
    cursor: pointer;
}
#select{
    padding-right: 1.3%;
    display: flex;
    width: 32%;
    height: 100%;
    justify-content: space-between;
}
#select li{
    width: 46%;
    list-style: none;
    height: 44px;
}
.typeBox{
    width: 16%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1%;
}
.typeBox button{
    width: 43%;
    height: 30px;
    font-family: Source Han Sans CN;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
    cursor: pointer;
	letter-spacing: 0px;
	background-color: #8493a6;
    outline: none;
    border-radius: 3px;
    border: 0px;
    color: #fff;
}
</style>